<template>
  <div class="container" v-if="!isQuanPingActive">
    <div class="left">
      <div class="search-box">
        <img src="../../public/gaode_logo.png" />
        <input placeholder="搜索位置、公交站、地铁站" @click="showSearchPanel" id="input-id" @input="hideSearchPanel"/><!--id绑定搜索提示和POI-->
        <i class="iconfont icon-luxian"></i>
      </div>
      <div class="search-message" v-if="searchActive">
        <div class="search-top">
          <button>
            <img src="../../public/美食.png" />
            <p>美食</p>
          </button>
          <button>
            <img src="../../public/酒店.png" />
            <p>酒店</p>
          </button>
          <button>
            <img src="../../public/景点.png" />
            <p>景点</p>
          </button>
          <button>
            <img src="../../public/小区.png" />
            <p>小区</p>
          </button>
        </div>
        <div class="search-middle">
          <ul>
            <li v-for="(item,index) in searchHistory" :key="index">
              <i class="iconfont icon-shizhong"></i>&nbsp;&nbsp;{{ item }}
            </li>
          </ul>
        </div>
        <div class="search-bottom">
          <img src="../../public/app2.png" />
        </div>
      </div>
      <div class="city-weather">
        <div class="currentcity">{{ currentCity }}</div>
        <div class="weather">
          <div class="tianqi">{{ currentCityWeather.dayweather }}</div>
          <div class="temperature">{{ currentCityWeather.nighttemp }}/{{ currentCityWeather.daytemp }}℃</div>
        </div>
      </div>
    </div>
    <div class="right">
      <div class="first">
        <el-button-group class="button-group">
          <label class="checkedbox" v-show="luwang"
            ><!--不能绑在label上，否则容易冒泡-->
            <input
              type="checkbox"
              :checked="luwang"
              @change="handleButtonClick('luwangLayer')"
            />&nbsp;路网
          </label>
          <el-button
            @click="handleButtonClick('weixing')"
            type="primary"
            color="#F8F8F8"
            size="large"
            :class="{ active: isWeixingActive }"
            ><i class="iconfont icon-weixing"></i>&nbsp;卫星</el-button
          >
          <el-button
            @click="handleButtonClick('kongqi')"
            type="primary"
            color="#F8F8F8"
            size="large"
            :class="{ active: isKongqiActive }"
            ><i class="iconfont icon-kongqiqingxin"></i>&nbsp;空气</el-button
          >
          <el-button
            @click="handleButtonClick('lukuang')"
            type="primary"
            color="#F8F8F8"
            size="large"
            :class="{ active: isLukuangActive }"
            ><i class="iconfont icon-lukuang"></i>&nbsp;路况</el-button
          >
          <el-button
            @click="handleButtonClick('ceju')"
            type="primary"
            color="#F8F8F8"
            size="large"
            :class="{ active: isCejuActive }"
            ><i class="iconfont icon-chizi"></i>&nbsp;测距</el-button
          >
          <el-button
            @click="handleButtonClick('quanping')"
            type="primary"
            color="#F8F8F8"
            size="large"
            :class="{ active: isQuanPingActive }"
            ><i class="iconfont icon-quanping"></i>&nbsp;全屏</el-button
          >
        </el-button-group>
        <el-popover
          placement="bottom"
          :width="300"
          trigger="click"
        >
        <template #reference>
          <el-button
          type="primary"
          color="#F8F8F8"
          size="large"
          class="download-app"
        >
          <i class="iconfont icon-shouji"></i>&nbsp;下载APP
        </el-button>
        </template>
        <div class="qecode">
          <img src="../../public/app.png"/>
        </div>
        </el-popover>
      </div>
      <div class="person-info" @click="isPersonMessageShow = !isPersonMessageShow"></div>
      <PersonMessage v-if="isPersonMessageShow" @theme-changed="handleThemeChanged"/>
    </div>
  </div>
  <div class="air-img" v-show="isKongqiActive">
    <img src="../../public/空气质量等级.jpg" />
    <div class="text">
      数据来源于<a href="https://www.juhe.cn/docs/api/id/796">聚合数据</a>
    </div>
  </div>
  <div class="exit-quanping">
    <el-button
      v-if="isQuanPingActive"
      type="primary"
      color="#F8F8F8"
      size="large"
      class="download-app"
      @click="handleButtonClick('exitQuanping')"
      >退出全屏</el-button
    >
  </div>
</template>

<script setup>
import { ref,onMounted,watchEffect,watch } from 'vue';
import PersonMessage from './PersonMessage.vue';
import { getCityByIP,getAdcodeByCity,getAllWeatherByAdcode } from '@/api';
const isWeixingActive = ref(false);
const isKongqiActive = ref(false);
const isLukuangActive = ref(false);
const isCejuActive = ref(false);
const isQuanPingActive = ref(false);
const luwang = ref(false);
const isPersonMessageShow = ref(false);
const currentCity = ref(null);
const currentCityAdcode = ref(null);
const currentCityWeather = ref({});
const searchActive = ref(false);
const searchHistory = ref([]);

const props = defineProps({
  AMap:{
    type:Object,
    required:true,
  },
  map:{
    type:Object,
    required:true,
  }
})

const emit = defineEmits(['button-click','themeChangedToParent']);
const handleButtonClick = (buttonType) => {
  if(buttonType === 'kongqi') {
    emit('button-click',buttonType,currentCity.value)
  } else {
  emit('button-click', buttonType);
  }
  switch (buttonType) {
    case 'weixing':
      isWeixingActive.value = !isWeixingActive.value;
      luwang.value = isWeixingActive.value;
      break;
    case 'kongqi':
      isKongqiActive.value = !isKongqiActive.value;
      break;
    case 'lukuang':
      isLukuangActive.value = !isLukuangActive.value;
      break;
    case 'ceju':
      isCejuActive.value = !isCejuActive.value;
      break;
    case 'quanping':
      isQuanPingActive.value = !isQuanPingActive.value;
      break;
    case 'exitQuanping':
      isQuanPingActive.value = !isQuanPingActive.value;
      break;
    default:
      console.warn(`未知按钮类型: ${buttonType}`);
  }
};

const handleThemeChanged = (theme) => {
  //继续向上传递
  emit('themeChangedToParent', theme);
}

//模拟搜索历史数据
searchHistory.value = ['aaa','bbb','ccc','ddd','eee']

const showSearchPanel = () => {
  searchActive.value = !searchActive.value;
}

const hideSearchPanel = () => {
  searchActive.value = false;
}

onMounted(async () => {
  console.log(props.AMap,props.map)//null
  try {
    const res1 = await getCityByIP();
    currentCity.value = res1.city;
    currentCityAdcode.value = res1.adcode;

  console.log(props.AMap,props.map)//null        

    // 确保AMap和map已正确传入
    if (props.AMap && props.map) {
      props.AMap.plugin(["AMap.AutoComplete", "AMap.PlaceSearch"], function() {
        try {
          const autoComplete = new props.AMap.AutoComplete({
            city: currentCity.value,
            input: "input-id"
          });
          
          // 初始化地点搜索
          const placeSearch = new props.AMap.PlaceSearch({
            city: currentCity.value,
            map: props.map,
            // panel: "input-id",
          });
          
          // 监听选择事件
          props.AMap.event.addListener(autoComplete, "select", function(e) {
            if (e.poi && e.poi.name) {
              placeSearch.setCity(e.poi.adcode);
              placeSearch.search(e.poi.name);
            }
          });
          
          // 监听输入事件（可选）
          props.AMap.event.addDomListener(document.getElementById("input-id"), "input", function(e) {
            // 可以在这里添加输入时的处理逻辑
          });
        } catch (error) {
          console.error("AMap插件初始化失败:", error);
        }
      });
    }
  } catch (error) {
    console.error("初始化失败:", error);
  }
});

watchEffect(//监听当前城市变化
  async () => {
    if(!currentCity.value) return;

    const res2 = await getAdcodeByCity(currentCity.value);
    currentCityAdcode.value = res2.geocodes[0].adcode;
    const res3 = await getAllWeatherByAdcode(currentCityAdcode.value);
    currentCityWeather.value = res3.forecasts[0].casts[0];
  },
)


</script>

<style lang="scss" scoped>
.container {
  display: flex;
  justify-content: space-between;
  align-items: center;
  position: fixed;
  width: 100vw;
  z-index: 999;
}
.left {
  display: flex;
  align-items: center;
  position: relative;
  .search-box {
    display: flex;
    justify-content: space-between;
    align-items: center;
    position: relative;
    gap: 5px;
    width: 360px;
    height: 45px;
    background-color: #f8f8f8;
    border-radius: 5px;
    margin-left: 10px;
    z-index: 999;
    &::after {
        content:'';
        position: absolute;
        width: 24px;
        height: 24px;
        font-size: 20px;
        background-image: url(../../public/放大镜.png);
        background-size: contain;
        right: 40px;
        z-index: 999;
      }
    img {
      width: 34px;
      height: 34px;
    }
    input {
      width: 280px;
      height: 100%;
      border: none;
      &:focus{
        outline: none;
      }
    }
    i {
      width: 34px;
      height: 34px;
      color: #2c9eff;
      font-size: 34px;
    }
  }
  .city-weather {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 120px;
    height: 45px;
    margin-left: 20px;
    background-color: white;
    border-radius: 5px;
    padding-inline: 5px;
    .currentcity{
      cursor: pointer;
      font-size: 0.85em;
      font-weight: 500;
    }
    .weather{
      font-weight: 300;
      font-size: 0.8em;
    .tianqi {
      text-align: center;
    }
  }
  }
}
.right {
  margin-top: 10px;
  margin-right: 10px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  .person-info {
    width: 50px;
    height: 50px;
    border: 1px solid gray;
    border-radius: 50%;
    background-image: url(../../public/默认头像.png);
    background-position: center;
    background-size: cover;
    cursor: pointer;
  }
  .button-group {
    margin-right: 10px;
    position: relative;

    .checkedbox {
      position: absolute;
      top: 0;
      left: -95px;
      width: 87.5px;
      height: 40px;
      background-color: #f8f8f8;
      text-align: center;
      line-height: 40px;
      border-radius: 5px;
    }
  }

  .button-group .el-button {
    position: relative;
    margin-right: 0;
    /* 移除默认外边距 */
  }

  /* 给除最后一个按钮外的所有按钮添加右边框 */
  .button-group .el-button:not(:last-child)::after {
    content: '';
    position: absolute;
    right: 0;
    top: 25%;
    height: 50%;
    width: 1px;
    background-color: #dcdfe6;
  }
}

.active {
  color: #2c9eff;
}

.air-img {
  position: fixed;
  bottom: 30px;
  right: 70px;
  z-index: 999;

  .text {
    position: absolute;
    top: 18px;
    right: 18px;
    font-size: 0.75em;

    a {
      text-decoration: none;
      font-size: 1.25em;
    }
  }
}

.exit-quanping {
  position: fixed;
  top: 20px;
  right: 30px;
  z-index: 999;
  transition: all 0.5s ease;
}

.search-message {
  position: absolute;
  top: 45px;
  left: 10px;
  width: 360px;
  background-color: #f8f8f8;
  border-radius: 5px;
  .search-top{
    display: flex;
    justify-content: space-evenly;
    align-items: center;
    border-bottom: 1px dashed gray;
    padding-bottom: 10px;
    button {
      cursor: pointer;
    }
    img {
      width: 46px;
      height: 46px;
    }
  }
  .search-middle {
    li {
      display: flex;
      align-items: center;
      margin-left: 15px;
      color: gray;
      height: 30px;
      cursor: pointer;
    }
  }
  .search-bottom {
    img {
    width: 360px;
    }
  }
}
</style>
